iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 4
1
Modern Web

寫給工程師的 WebGL 學習心得系列 第 4

[WebGL - Day04] 為什麼 WebGL 的效能這麼強?

  • 分享至 

  • xImage
  •  

Mythbusters Demo GPU versus CPU
「網頁用了WebGL技術,所以很快!」
嗯...所以WebGL是阿斯拉的加速器還是什麼呼吸法嗎?


所以,WebGL 是什麼?

引述部分 wiki:

WebGL 程式由 JavaScript 編寫的控制代碼和
OpenGL Shading Language(GLSL)編寫的著色器程式碼組成

這段話敘述了兩件事:

  • JavaScript 控制
  • GLSL

Shader 是在 GPU 上跑的指令,
而 WebGL 讓開發者可以用 JavaScript 操作 Shader

因此寫 WebGL 時,很多時候是寫 GPU 執行的指令
需要同時寫 JavaScript 與 Shader

為什麼 GPU 處理的效果這麼驚豔?:

一個令我印象深刻的影片:
Mythbusters Demo GPU versus CPU

CPU - dsigned for serial operations
舉例來說,如果 CPU 是射速快的機關槍
CPU

GPU - dsigned for parallel operations
GPU 相對來說就是射速慢,但彈丸數量相當多的霰彈槍
GPU

GPU is a processing unit or a circuit specially designed for
faster and efficient computer graphics operation image manipulation

總之,GPU 是用來運算影像的 (CPU並不是喔!)

GPU 一次處理一整片啊...
所以,寫 Shader 時的思考邏輯幾乎 完全不同
聽來是個大問號,我會在後文說明
有趣,但也是相當困難的部分

瀏覽器對 WebGL 的支援性:

目前大部分主流瀏覽器、手機瀏覽器對 WebGL 的支援性夠高
(在一些 in-App Browser 也可以瀏覽 WebGL 網頁)

約略 2012~2013 年附近,熱烈討論 HTML5
當時瀏覽器對 canvas 標籤的支援性不夠高
WebGL 是在 canvas 上實現二維及三維渲染,
因此不支援 canvas 的瀏覽器也一定不支援 WebGL
註:IE 10 可使用 WebGL,但效果不是很好

幾年前使用 WebGL 技術的網頁,最多會有三種頁面:

  • WebGL 畫面
  • 不支援 WebGL 時,顯示 canvas 版畫面
  • 不支援 WebGL 與 canvas 時的畫面

GPU 一定比 CPU 快嗎?

不一定,由於 CPU 與 GPU 的設計方式不同
少量矩陣運算時,GPU 耗時高於 CPU
cpu-v-gpu-3

大量矩陣運算時,CPU 耗時遠高於 GPU
cpu-v-gpu-1024

另一個討論 WebGL 的影片:
WebGL + GPU = Amazing Results!
WebGL + GPU = Amazing Results!

影片討論 WebGL,稍微硬了一些


不知道讀到這後是覺得有趣還是想放棄呢?
總結本篇重點:

  • WebGL 是用 JavaScript 控制 GLSL
  • GLSL 一次處理大量運算

上一篇
[WebGL - Day03] WebGL 學習資源
下一篇
[WebGL - Day05] 學習經驗 1/2 - 有點不得其門而入的碰壁期
系列文
寫給工程師的 WebGL 學習心得30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
King Tzeng
iT邦新手 3 級 ‧ 2019-09-20 20:47:37

每天準時拜讀/images/emoticon/emoticon34.gif
PS:前輩後面好像打錯了 "wegGL"

感謝小幫手校正!
直接改囉

0
lb01910483
iT邦新手 5 級 ‧ 2019-09-20 21:37:16

少量矩陣運算時,GPU 耗時低於 CPU

這段是不是打反了

對...Orz,我就直接改囉
感謝校正!

0
阿展展展
iT邦好手 1 級 ‧ 2020-01-29 00:19:26

霰彈槍XDDD

看過就會記得很久 XD

我要留言

立即登入留言